import { Button, Progress, Table } from 'antd';
import React, { useEffect } from 'react';
import './Head.scss'
//导入echarts
import * as echarts from 'echarts';
const Head = () => {
useEffect(()=>{
 var myChart = echarts.init(document.getElementById('main')||document.body);
 myChart.setOption({
    title: {
       
        // text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
        text: '收入/费用报告',
        top:20,
        left:15,
        width: 100,
        textStyle: {
          fontSize: 12,
          color: '#666'
        }
      },
    tooltip: {},
    xAxis: {
      data: ['2020/12/01', '2020/12/02', '2020/12/03', '2020/12/04', '2020/12/05', '2020/12/06', '2020/12/07']
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: [300, 235, 300, 200, 100, 70,90],
        barWidth:'20',	//柱状条宽度
      }
    ],
    
  });
},[])
let bool = false
//左下表格数据
const dataSource = [
    {
      key: '1',
      name: '查看介绍',
     
    },
    {
      key: '2',
      name: '查看介绍',
    
    },
    {
        key: '1',
        name: '查看介绍',
       
      },
      {
        key: '1',
        name: '查看介绍',
       
      },
    
      
  ];
  
  const columns = [
  
      {
        title: '图片',
        dataIndex: 'age',
        key: 'age',
        width:20,
        
        render: (a:any,record:any,index:any) => <img style={{margin:0}} object-fit="contain" src='https://cdn7.axureshop.com/demo/1607406/images/%E7%B3%BB%E7%BB%9F%E9%A6%96%E9%A1%B5/u447.png' />,
      },
      {
        title: '老师信息',
        
        key: 'age',
        width:250,
        render: (a:any,record:any,index:any) => <div>
                               <h5 style={{margin:0}}>老师名称</h5>
                               <p style={{fontSize:12,margin:0}}>工龄:10年 学生:1000个</p>
                                                </div>
      },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
  
  ];
  //右下表格数据
  const dataSource1 = [
    {
      key: '1',
      name: '罗拉戴维森',
      banji: '高二三班',
      teacher: '黄老师',
      time:'2020-12-01'
    },
    {
        key: '2',
        name: '罗拉戴维森',
        banji: '高二三班',
        teacher: '黄老师',
        time:'2020-12-01'
    },
    {
        key: '3',
        name: '罗拉戴维森',
        banji: '高二三班',
        teacher: '黄老师',
        time:'2020-12-01'
    },
    {
        key: '4',
        name: '罗拉戴维森',
        banji: '高二三班',
        teacher: '黄老师',
        time:'2020-12-01'
    },
    {
        key: '5',
        name: '罗拉戴维森',
        banji: '高二三班',
        teacher: '黄老师',
        time:'2020-12-01'
    },
  ];
  
  const columns1 = [
    {
      title: '学生名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '班级',
      dataIndex: 'banji',
      key: 'banji',
    },
    {
      title: '班主任',
      dataIndex: 'teacher',
      key: 'teacher',
    },
    {
        title: '入学时间',
        dataIndex: 'time',
        key: 'time',
    },
  
  ];
    return (
        <div className='head'>
            <div className='head-bx'>
                <div className='head-top'>
                    <div className='top-right'>
                        <div className='yi'>
                            <p>学生总数</p>
                            <h2 style={{margin:0}}>3250</h2>
                            <Progress  style={{width:300}} percent={80} strokeColor='red'/><br />
                             <span>20天内增加了80%</span>
                        </div >
                        <div className='yi'>
                            <p>新生</p>
                            <h2 style={{margin:0}}>3250</h2>
                            <Progress  style={{width:300}} percent={50} strokeColor='red'/><br />
                             <span>20天内增加了50%</span>
                        </div>
                        <div className='yi'>
                            <p>总课程</p>
                            <h2 style={{margin:0}}>3250</h2>
                            <Progress  style={{width:300}} percent={56} strokeColor='red'/><br />
                             <span>20天内增加了56%</span>
                        </div>
                        <div className='yi'>
                            <p>收费</p>
                            <h2 style={{margin:0}}>3250</h2>
                            <Progress  style={{width:300}} percent={76} strokeColor='green'/><br />
                            <span>20天内增加了76%</span>
                        </div>
                    </div>
                    <div className='top-left'>
                        <div id='main'></div>

                    </div>
                </div>
                <div className='head-bottom'>
                    <div className="bottom-right">
                    <Table dataSource={dataSource} columns={columns} showHeader={bool} pagination={bool}/>
                    <Button type="primary" danger style={{marginLeft:170,marginTop:10}}>
                        查看所有
                    </Button>
                    </div>
                    <div className="bottom-left">
                    <Table dataSource={dataSource1} columns={columns1}  pagination={bool}/>
                    <Button type="primary" danger style={{marginLeft:400,marginTop:10}}>
                        查看所有
                    </Button>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Head;